<template>
	<view class="main">
		<my-navbar :background="{'background-color': 'transparent'}"></my-navbar>
		<view class="bg-box"></view>
		<view class="user-box">
			<u-avatar bg-color="#ffffff" size="100"></u-avatar>
			<view class="nick-name">登录/注册</view>
			<u-icon name="setting" size="46"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	$screen-width: 750rpx;
	$bg-width: 3000rpx;
	$bg-need-height: 300rpx;
	$bg-left:($bg-width - $screen-width) / 2;

	.bg-box {
		width: $bg-width;
		height: $bg-width;
		// border-radius: $bg-width;
		background-image: linear-gradient(to bottom right, $u-type-success, $u-type-success-light);
		position: fixed;
		top: -($bg-width - $bg-need-height);
		left: -$bg-left;
		z-index: -1;
	}

	.user-box {
		padding: $uni-spacing-row-lg;
		display: flex;
		align-items: center;
		// color: #ffffff;

		.nick-name {
			font-size: 36rpx;
			font-weight: bold;
			margin-left: $uni-spacing-row-lg;
			flex: 1;
		}

	}
</style>
